<script setup type="module">
    import { ref } from 'vue';

    // 属性绑定：v-bind
    let imgUrl = "http://gips3.baidu.com/it/u=1874299413,3253595329&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560"
    // 属性放在对象的属性上
    const data = {
        imgUrl:"http://gips3.baidu.com/it/u=1874299413,3253595329&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560",
        url:"http://www.baidu.com"
    }



    // 事件绑定：v-on，也可以简写为@
    let counter = ref(0)
    function fun1(){
        counter.value++
    }

    function fun2(event){
        let flag = confirm("确定跳转吗？")
        if(!flag){
            event.preventDefault()
        }
    }

    function fun3(){
        alert('超链接被点击了')
    }
</script>

<template>
    <div>
        <!-- 属性绑定 -->
        <img v-bind:src="imgUrl" />
        <img :src="imgUrl" />
        <!-- 属性绑定：属性放在对象的属性中 -->
        <img v-bind:src="data.imgUrl" /><br>



        <!-- 事件绑定 -->
        <span>counter的值为：{{counter}}</span><button v-on:click="fun1()">+</button> <!-- 这是事件绑定的正常写法，还有内联写法，如下 --><br>
        <span>counter的值为：{{counter}}</span><button v-on:click="counter++">+</button> <!-- 内联写法，直接在click事件上写函数体的内容 --><br>
        <!-- 事件只发生一次，事件可以绑定once修饰 -->
        <span>counter的值为：{{counter}}</span><button v-on:click.once="counter++">+</button><br>
        <!-- 阻止标签的默认行为，事件绑定prevent修饰 -->
        <!-- 原生js阻止默认行为 -->
        <a v-bind:href="data.url" v-on:click="fun2($event)" target="_black">百度</a><br>
        <!-- vue阻止默认行为 -->
        <a v-bind:href="data.url" v-on:click.prevent="fun3()" target="_black">百度</a>

    </div>
    
</template>
  

<style scoped>
    img{
        /* display: block; */
        width: 200px;
        height: 300px;
    }

</style>
